<script lang="ts" setup>
import { computed } from 'vue'
interface Props {
  Soc?: string
}
const props = withDefaults(defineProps<Props>(), {
  Soc: '0',
})
const levelCount = computed(() => {
  // 计算格数，小数部分也要保留
  return (+props.Soc / 100) * 5
})
</script>

<template>
  <div class="battery" flex items-center justify-center>
    <div class="battery-body">
      <div class="battery-Soc">
        <span>SOC:{{ Soc }}%</span>
      </div>
      <div
        class="battery-Soc-level"
        v-for="(item, index) in Math.floor(levelCount)"
        :key="'full-' + index"
      />
      <div
        v-if="levelCount % 1 !== 0"
        class="battery-Soc-level partial-level"
        :style="{ width: ((levelCount % 1) * 60) / 7.5 + 'vw' }"
      />
    </div>
    <div class="battery-head" />
  </div>
</template>

<style scoped lang="scss">
.battery {
  position: relative;
  width: 60%;
  height: 60%;
  .battery-body {
    width: 100%;
    height: 100%;
    background: rgba(69, 170, 255, 0.4);
    border: 8px solid rgb(69, 170, 255);
    border-radius: 32px;
    padding: 20px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    z-index: 10;
    .battery-Soc {
      font-size: 32px;
      line-height: 2;
      color: #fff;
      position: absolute;
      padding: 0 20px;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      z-index: 10;
      background: linear-gradient(180deg, #01e5fe 0%, #45aaff 40%);
      border-radius: 8px 8px 8px 8px;
      font-weight: bold;
    }

    .battery-Soc-level {
      height: 100%;
      background: rgba(100, 255, 180, 0.6);
      width: 20%;
      border-radius: 5px;
      z-index: 10;
      transition: all 0.5s;
    }

    .battery-Soc-level + .battery-Soc-level {
      margin-left: 10px;
    }

    /* 用来表示部分格子的样式 */
    .partial-level {
      background: rgba(100, 255, 180, 0.6);
      border-radius: 5px;
      margin-left: 10px;
      transition: all 0.5s;
    }
  }

  .battery-head {
    width: 15px;
    height: 18%;
    background: #45aaff;
    border-radius: 0px 8px 8px 0px;
  }
}
</style>
